<template>
  <a-config-provider :theme="theme">
    <div id="app">
      <!-- 路由视图容器 -->
      <router-view />
    </div>
  </a-config-provider>
</template>

<script setup>
import { ConfigProvider } from 'ant-design-vue'

// 配置Ant Design主题
const theme = {
  token: {
    // 主色配置
    colorPrimary: '#722ed1', // 深紫色
    colorSuccess: '#d4990a', // 古铜金色作为成功色
    colorWarning: '#faad14', // 警告色
    colorError: '#ff4d4f', // 错误色
    colorInfo: '#722ed1', // 信息色使用主色

    // 背景色配置
    colorBgContainer: 'rgba(26, 26, 46, 0.95)', // 容器背景
    colorBgElevated: 'rgba(22, 33, 62, 0.95)', // 弹出层背景
    colorBgLayout: 'transparent', // 布局背景
    colorBgBase: 'rgba(26, 26, 46, 0.8)', // 基础背景

    // 文字色配置
    colorText: '#ffffff', // 主文字色
    colorTextSecondary: 'rgba(255, 255, 255, 0.85)', // 次要文字色
    colorTextTertiary: 'rgba(255, 255, 255, 0.65)', // 第三级文字色
    colorTextQuaternary: 'rgba(255, 255, 255, 0.45)', // 第四级文字色

    // 边框色配置
    colorBorder: 'rgba(255, 255, 255, 0.15)', // 默认边框色
    colorBorderSecondary: 'rgba(255, 255, 255, 0.1)', // 次要边框色

    // 阴影配置
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.35)',
    boxShadowSecondary: '0 2px 8px rgba(0, 0, 0, 0.25)',

    // 圆角配置
    borderRadius: 8,
    borderRadiusLG: 12,
    borderRadiusSM: 4,

    // 字体配置
    fontSize: 14,
    fontSizeLG: 16,
    fontSizeSM: 12,
    lineHeight: 1.5,

    // 控件高度
    controlHeight: 32,
    controlHeightLG: 40,
    controlHeightSM: 24
  },
  components: {
    // Menu组件主题
    Menu: {
      colorBgContainer: 'transparent',
      colorText: 'rgba(255, 255, 255, 0.85)',
      colorTextSelected: '#ffffff',
      colorItemBgSelected: 'rgba(114, 46, 209, 0.3)',
      colorItemBgHover: 'rgba(114, 46, 209, 0.2)',
      colorActiveBarBorderSize: 0
    },
    // Card组件主题
    Card: {
      colorBgContainer: 'rgba(255, 255, 255, 0.05)',
      colorBorderSecondary: 'rgba(255, 255, 255, 0.15)'
    },
    // Table组件主题
    Table: {
      colorBgContainer: 'transparent',
      headerBg: 'rgba(255, 255, 255, 0.1)',
      colorFillAlter: 'transparent',
      colorFillContent: 'transparent',
      colorFillSecondary: 'transparent',
      rowHoverBg: 'rgba(114, 46, 209, 0.1)',
      rowSelectedBg: 'rgba(114, 46, 209, 0.2)',
      rowSelectedHoverBg: 'rgba(114, 46, 209, 0.3)',
      colorSplit: 'rgba(255, 255, 255, 0.15)',
      borderColor: 'rgba(255, 255, 255, 0.15)'
    },
    // Button组件主题
    Button: {
      colorPrimary: '#722ed1',
      colorPrimaryHover: '#9254de',
      colorPrimaryActive: '#531dab'
    },
    // Input组件主题
    Input: {
      colorBgContainer: 'rgba(255, 255, 255, 0.05)',
      colorBorder: 'rgba(255, 255, 255, 0.2)',
      colorBorderHover: '#722ed1',
      activeBorderColor: '#722ed1',
      activeShadow: '0 0 0 2px rgba(114, 46, 209, 0.2)',
      hoverBorderColor: '#722ed1',
      colorText: '#ffffff',
      colorTextPlaceholder: 'rgba(255, 255, 255, 0.45)'
    },
    // Select组件主题
    Select: {
      colorBgContainer: 'rgba(255, 255, 255, 0.05)',
      colorBorder: 'rgba(255, 255, 255, 0.2)',
      colorBorderHover: '#722ed1',
      activeBorderColor: '#722ed1',
      activeShadow: '0 0 0 2px rgba(114, 46, 209, 0.2)',
      colorText: '#ffffff',
      colorTextPlaceholder: 'rgba(255, 255, 255, 0.45)',
      optionSelectedBg: 'rgba(114, 46, 209, 0.3)',
      optionActiveBg: 'rgba(114, 46, 209, 0.2)',
      optionSelectedColor: '#ffffff',
      colorBgElevated: 'rgba(22, 33, 62, 0.95)'
    },
    // InputNumber组件主题
    InputNumber: {
      colorBgContainer: 'rgba(255, 255, 255, 0.05)',
      colorBorder: 'rgba(255, 255, 255, 0.2)',
      colorBorderHover: '#722ed1',
      activeBorderColor: '#722ed1',
      activeShadow: '0 0 0 2px rgba(114, 46, 209, 0.2)',
      colorText: '#ffffff',
      handleBorderColor: 'rgba(255, 255, 255, 0.2)',
      handleBg: 'rgba(255, 255, 255, 0.05)'
    },
    // DatePicker组件主题
    DatePicker: {
      colorBgContainer: 'rgba(255, 255, 255, 0.05)',
      colorBorder: 'rgba(255, 255, 255, 0.2)',
      colorBorderHover: '#722ed1',
      activeBorderColor: '#722ed1',
      activeShadow: '0 0 0 2px rgba(114, 46, 209, 0.2)',
      colorText: '#ffffff',
      colorTextPlaceholder: 'rgba(255, 255, 255, 0.45)',
      colorBgElevated: 'rgba(22, 33, 62, 0.95)',
      colorIcon: 'rgba(255, 255, 255, 0.65)'
    },
    // Modal组件主题
    Modal: {
      colorBgElevated: 'rgba(22, 33, 62, 0.95)',
      colorBorder: 'rgba(255, 255, 255, 0.15)'
    },
    // Drawer组件主题
    Drawer: {
      colorBgElevated: 'rgba(22, 33, 62, 0.95)',
      colorBorder: 'rgba(255, 255, 255, 0.15)'
    }
  }
}
</script>

<style lang="scss">
#app {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}
</style>
